<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- <script>
      console.log('1')
      setTimeout(() => {
        console.log('2')
      }, 0)
      console.log('3')
    </script> -->

    <button>测试xhr是异步函数</button>
    <script>
        //   document.querySelector('button').addEventListener('click', function () {
        //     console.log('1')

        //     const xhr = new XMLHttpRequest()
        //     xhr.open('post', 'http://ajax-api.itheima.net/api/login')
        //     xhr.setRequestHeader('content-type', 'application/json')

        //     xhr.addEventListener('load', function () {
        //       //   console.log(xhr.response)
        //       //   console.log(JSON.parse(xhr.response))
        //       console.log('2')
        //     })
        //     let obj = {
        //       username: 'admin',
        //       password: '123456',
        //     }
        //     xhr.send(JSON.stringify(obj))

        //     console.log('3')
        //   })
    </script>
    <!-- <script>
      setTimeout(() => {
        console.log(1)
        setTimeout(() => {
          console.log(2)
          setTimeout(() => {
            console.log(3)
            setTimeout(() => {
              console.log(3)
              setTimeout(() => {
                console.log(3)
              }, 3000)
            }, 3000)
          }, 3000)
        }, 2000)
      }, 1000)
    </script> -->

    <script>
        //回调函数里面嵌套回调函数 叫回调嵌套 也叫回调地狱
        const xhr1 = new XMLHttpRequest()
        xhr1.open('post', 'http://ajax-api.itheima.net/api/login')
        xhr1.setRequestHeader('content-type', 'application/json')

        xhr1.addEventListener('load', function () {
            console.log(xhr1.response)
            const xhr2 = new XMLHttpRequest()
            xhr2.open('post', 'http://ajax-api.itheima.net/api/login')
            xhr2.setRequestHeader('content-type', 'application/json')

            xhr2.addEventListener('load', function () {
                //   console.log(xhr.response)
                //   console.log(JSON.parse(xhr.response))
                console.log('2')
                const xhr3 = new XMLHttpRequest()
                xhr3.open('post', 'http://ajax-api.itheima.net/api/login')
                xhr3.setRequestHeader('content-type', 'application/json')

                xhr3.addEventListener('load', function () {
                    //   console.log(xhr.response)
                    //   console.log(JSON.parse(xhr.response))
                    console.log('2')
                })
                let obj = {
                    username: 'admin',
                    password: '123456',
                }
                xhr3.send(JSON.stringify(obj))
            })
            let obj = {
                username: 'admin',
                password: '123456',
            }
            xhr2.send(JSON.stringify(obj))
        })
        let obj = {
            username: 'admin',
            password: '123456',
        }
        xhr1.send(JSON.stringify(obj))
    </script>
</body>

</html>